<template>
  <div>
	<div class="alert-box-item">
		<div class="bigImg-div" @click="toGetImg">
			<img class="bigImg" :src=valueUrl v-if="valueUrl">
		</div>
	</div>

    <div class="alert-box-item">
		<div class="bigImg-div" @click="toGetImg2">
			<img class="bigImg" :src=valueUrl2 v-if="valueUrl2">
		</div>
	</div>


    <div>
      <img :src="makePic" alt srcset />
    </div>

    <div>
      <el-button @click="drawProdPicture" type="primary">保存</el-button>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
let inputElement = null
let inputElement1 = null
export default {
  name: 'AddActivity',
  components: {
  },
  data () {
    return {
      valueUrl: '',
      valueUrl2:'',
      makePic: ''
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
			toGetImg() {
				if (inputElement === null) {
				// 生成文件上传的控件
					inputElement = document.createElement('input')
					inputElement.setAttribute('type', 'file')
					inputElement.style.display = 'none'

					if (window.addEventListener) {
						inputElement.addEventListener('change', this.uploadFile, false)
					} else {
						inputElement.attachEvent('onchange', this.uploadFile)
					}

					document.body.appendChild(inputElement)
				}
				inputElement.click()
			},
			uploadFile(el) {
				if (el && el.target && el.target.files && el.target.files.length > 0) {
					console.log(el)
					const files = el.target.files[0]
					const isLt2M = files.size / 1024 / 1024 < 2
					const size = files.size / 1024 / 1024
					console.log(size)
					// 判断上传文件的大小
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!')
					} else if (files.type.indexOf('image') === -1) { //如果不是图片格式
						// this.$dialog.toast({ mes: '请选择图片文件' });
						this.$message.error('请选择图片文件');
					} else {
						const that = this;
						const reader = new FileReader(); // 创建读取文件对象
						reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
						reader.onload = function() { // 文件读取完成后
							// 读取完成后，将结果赋值给img的src
							that.valueUrl = this.result;
                            console.log(231);
							console.log(this.result);
							// 数据传到后台
						//const formData = new FormData()
						//formData.append('file', files); // 可以传到后台的数据
						};
					}
				}
			},
			toGetImg2() {
				if (inputElement1 === null) {
				// 生成文件上传的控件
					inputElement1 = document.createElement('input')
					inputElement1.setAttribute('type', 'file')
					inputElement1.style.display = 'none'

					if (window.addEventListener) {
						inputElement1.addEventListener('change', this.uploadFile2, false)
					} else {
						inputElement1.attachEvent('onchange', this.uploadFile2)
					}

					document.body.appendChild(inputElement1)
				}
				inputElement1.click()
			},
			uploadFile2(el) {
				if (el && el.target && el.target.files && el.target.files.length > 0) {
					console.log(el)
					const files = el.target.files[0]
					const isLt2M = files.size / 1024 / 1024 < 2
					const size = files.size / 1024 / 1024
					console.log(size)
					// 判断上传文件的大小
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!')
					} else if (files.type.indexOf('image') === -1) { //如果不是图片格式
						// this.$dialog.toast({ mes: '请选择图片文件' });
						this.$message.error('请选择图片文件');
					} else {
						const that = this;
						const reader = new FileReader(); // 创建读取文件对象
						reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
						reader.onload = function() { // 文件读取完成后
							// 读取完成后，将结果赋值给img的src
							that.valueUrl2 = this.result;
							console.log(21);
							// 数据传到后台
						//const formData = new FormData()
						//formData.append('file', files); // 可以传到后台的数据
						};
					}
				}
			},

    drawProdPicture () {
      let img1 = new Image()
      img1.src = this.valueUrl
      img1.width = 350
      img1.height = 350
      img1.setAttribute('crossOrigin', 'anonymous')
      let canvas = document.createElement("canvas")
      let context = canvas.getContext("2d")
      canvas.width = 700
      canvas.height = 350
      let img2 = new Image()
      let flag = true
      // 将 img1 加入画布
      img1.onload = () => {
        context.drawImage(img1, 350, 0, 350, 350)
        img2.src = this.valueUrl2
        img2.setAttribute('crossOrigin', 'anonymous')
        img2.width = 350
        img2.height = 350
        if (flag) {
          flag = false
        } else {
          let src = canvas.toDataURL()
          this.makePic = src
        }
      }
      // 将 img2 加入画布
      img2.onload = () => {
        context.drawImage(img2, 0, 0, 350, 350)
        
        let src = canvas.toDataURL('image/png')        
        
        //创建一个a标签
        const a_b = document.createElement('a');
        //设置href指向
        a_b.href =  src;
        //设置图片下载名字
        a_b.download = "makePic";
        //点击a标签
        a_b.click() 

        if (flag) {
          flag = false
        } else {
          let src = canvas.toDataURL('image/png')
          this.makePic = src
        }
      }

    }
  }
}
</script>
<style>

	.bigImg-div {
		width: 200px;
		height: 200px;

		overflow: hidden;
		border: 1px solid #ddd;
	}

	.bigImg {
		display: block;
		width: 200px;
		height: 200px;
	}

</style>
